<template>
    <div class="date-tools">
      <div class="showTime">
        <span v-if="startTime==''">入住时间</span>
        <span v-else>{{startTime.month}}月{{startTime.date}}日</span>
        <span v-if="endTime==''">离开时间</span>
        <span v-else>{{endTime.month}}月{{endTime.date}}日</span>
      </div>
        <div class="date-years">
            <button class="date-btn date-left" @click="subMonth()"><</button>
            <button class="date-middle" @click="selectYM()">{{panelYear}}年{{panelMonth+1}}月</button>
            <button class="date-btn date-right" @click="addMonth()">></button>
        </div>
        <div class="date-weeks">
            <span>日</span>
            <span>一</span>
            <span>二</span>
            <span>三</span>
            <span>四</span>
            <span>五</span>
            <span>六</span>
        </div>
        <div class="date-days">
            <template v-for="(day,index) in dayFullList">
            <button v-if="day!=0"><!-- 本月日期 -->
              <!-- 今天 -->
                <a href="javascript:void(0);" v-if="todayDate==day"
                  class="active" @click="getCurrentDay(day)">
                  {{day | filterDay}}
                </a>
                <!-- 需要处理的日期 -->
                <a href="javascript:void(0);" v-else-if="(trainDateFullArr.includes(parseFloat(day)))"
                  class="active">
                  {{day | filterDay}}
                </a>
                <a href="javascript:void(0);" @click="getCurrentDay(day)" v-else>{{day | filterDay}} </a>
            </button>
            <button v-else><!-- 不是本月 -->
                <a href="javascript:void(0);" style="opacity:0;">{{day}} </a>
            </button>
            </template>
        </div>
        <!-- 年月下拉框 -->
        <div class="drop-down-ym" v-if="showDropDownYM">
            <div class="drop-down-y">
                <a href="javascript:void(0);" v-for="(item,index) in yearList" @click="selectY(item)">{{item}}</a>
            </div>
            <div class="drop-down-m">
                <a href="javascript:void(0);" v-for="(item,index) in monthList" @click="selectM(item-1)">{{item}}</a>
            </div>
        </div>

        <div class="fixedBottom">
          <button type="button" name="button" class="blockBtn" @click="rentTimeEvent">确定</button>
        </div>
    </div>
</template>

<script>
import {Toast} from 'mint-ui';
    export default ({
        props: ['dateToolsKey','trainDateFullList'],
        data:()=>({
            yearList:[],
            monthList:[1,2,3,4,5,6,7,8,9,10,11,12],
            weekList:[],
            dayList:[],//所有的天数列表，前面空位补0
            dayFullList:[],//所有的天数列表，前面空位补0
            panelYear:'',//仪表盘显示的年
            panelMonth:'',//仪表盘显示的月（从0开始）
            panelDay:'',//仪表盘显示的天（从1开始）
            firstDay:'',//每月第一天
            lastDay:'',//每月最后一天也即每月多少天
            firstDayisWhat:'',//第一天星期几0-6（星期日到星期六）
            showDropDownYM:false,
            todayDate:'', //今天
            trainDateFullArr:[],     //需要处理的日期
            startTime:'',       //入住时间
            endTime:'',         //离开时间
            clickKey:1,   //控制开始时间和结束时间的事件开关
        }),
        filters:{
            filterDay(value){
                return parseInt(value.slice(-2));
            }
        },
        methods:{
          // 确定时间选择
          rentTimeEvent() {
            let startTime = this.startTime;
            let endTime = this.endTime;
            this.$emit('rentTimeEvent',{
              startTime:startTime,
              endTime:endTime
            });
          },
            getCurrentDay(currentDay){    //选择日期事件
              let that = this;

              let startYear = currentDay.slice(0,4);
              let startMonth = currentDay.slice(4,6);
              let startDate = currentDay.slice(6,8);

                if(that.clickKey==1){    //选择入住时间
                  that.trainDateFullArr = [];
                  that.todayDate = currentDay;
                  that.clickKey = 2;
                  that.startTime = {
                    year:startYear,
                    month:startMonth,
                    date:startDate
                  };
                  that.endTime = '';    //重置离开时间
                  that.trainDateFullArr[0] = parseFloat(currentDay);
                  console.log(currentDay);
                }else{          //选择离开时间
                  that.clickKey = 1;
                  let endYear = currentDay.slice(0,4);
                  let startMonth = currentDay.slice(4,6);
                  let startDate = currentDay.slice(6,8);
                  that.endTime = {
                    year:startYear,
                    month:startMonth,
                    date:startDate
                  };

                  let trainDays = parseFloat(currentDay) - parseFloat(that.todayDate);
                  console.log(trainDays);
                  if(trainDays < 0) {
                    Toast('离开时间需选择在入住时间之后');
                    return false;
                  }
                  for (var i = 0; i <= trainDays; i++) {

                    that.trainDateFullArr.push(parseFloat(that.todayDate)+i);
                    console.log(parseFloat(that.todayDate)+i);
                  }
                  console.log(that.trainDateFullArr);
                }

                // this.panelDay = currentDay;
            },
            dateInit(year=(new Date()).getFullYear(),month=(new Date()).getMonth()){
                let self = this;
                let y = year;
                let m = month;
                self.panelYear = year;
                self.panelMonth = month;
                self.firstDay = (new Date(y,m,1)).getDate();//每月第一天
                self.lastDay = (new Date(y,m+1,0)).getDate();//每月最后一天也即每月多少天
                self.firstDayisWhat = (new Date(y,m,1)).getDay();//第一天星期几0-6（星期日到星期六）
                let beginTmp = new Array(self.firstDayisWhat).fill(0);//初始化长度为3的数组并填充0
                let lastTmp = [];//初始化长度为当月天数的数组并填充为0-30或0-31
                let lastFullTmp = [];//初始化完整的月的每天格式为年月日20180627
                for (let i=1;i<=self.lastDay;i++){
                    lastTmp.push(i);
                    lastFullTmp.push(''+self.panelYear+self.addPreZero(self.panelMonth+1)+self.addPreZero(i));
                }
                self.dayList=[...beginTmp,...lastTmp];//用结构的方式生成新日期数组
                self.dayFullList = [...beginTmp,...lastFullTmp];//用结构的方式生成年月日完整的新日期数组
            },
            subMonth(){
                let self = this;
                if(self.panelMonth>0){
                    self.panelMonth--;
                }
            },
            addMonth(){
                let self = this;
                if(self.panelMonth<11){
                    self.panelMonth++;
                }
            },
            selectYM(){
                let self = this;
                self.showDropDownYM = true;
            },
            selectY(year){
                let self = this;
                self.panelYear = year;
            },
            selectM(month){
                let self = this;
                self.panelMonth = month;
                self.showDropDownYM=false;
            },
            addPreZero(num){//小于9的需要添加0前缀
                return (num>9) ? num:('0'+num);
            },
            removePreZero(num){//小于9的需要去除0前缀
                return parseInt(num);
            }
        },
        watch: {
            panelMonth(newVal,oldVal){//检测月份变化
                this.dateInit(this.panelYear,this.panelMonth);
            },
            panelYear(newVal,oldVal){//检测年份变化
                this.dateInit(this.panelYear,this.panelMonth);
            },
            panelDay(newVal,oldVal){//检测具体日期变化
                this.$emit('topDateEvent'+this.dateToolsKey,newVal);
            }
        },
        mounted(){
            let todayDate = new Date(); //今天日期
            let tM = this.addPreZero(todayDate.getMonth()+1);
            let tD = this.addPreZero(todayDate.getDate());
            this.todayDate = todayDate.getFullYear()+tM+tD;
            // 获得年份列表： 1900-2100
            for(let i = 1900; i <= 2100; i++) {
                this.yearList.push(i);
            }
            this.trainDateFullArr = this.trainDateFullList;
            this.dateInit();
        }
    })
</script>

<style scoped lang="scss">
.showTime{
  @include flex;
  text-align: center;
  margin-bottom: 10px;
  span{
    @include flexcell;
    padding: 15px 0;
    font-size: 1.2rem;
    color: $lightColor;
    border-right: 1px solid $borderColor;
    &:nth-child(2){
      border-right: none;
    }
  }
}
button{
    background-color:#fff;
    cursor:pointer;
}
.date-btn,.date-middle{
    color:#333!important;
    border: none;
    font-size: 1rem;
}
.date-tools{
    position:relative;
    display:inline-block;
    overflow: hidden;
}
.date-btn{
    width:34px;
    height:34px;
    border-radius:50%;
}

.date-years{
    margin:14px 20px 0 20px;
    display:flex;
    justify-content:space-between;
}
.date-weeks{
    display: flex;
    justify-content:space-between;
}
.date-weeks span{
    display:inline-block;
    width:44px;
    height:34px;
    line-height:34px;
    text-align:center;
}

.date-days button{
    display: inline-block;
    width:44px;
    height:36px;
    background-color:#fff;
    border:none;
}
.date-days a{
    color:#000;
    display:inline-block;
    width:34px;
    height:34px;
    line-height:34px;
    border-radius:50%;
    text-align:center;
}
.date-days a.active{
    cursor:pointer;
    color:#fff;
    background-color:#aacc03;
}
.date-days a.special{
  color: #fff;
  background-color:#ddd;
}

.drop-down-ym{
    position:absolute;
    top:0;
    left:0;
    width:310px;
    height:272px;
    background-color:rgba(255,255,255,0.9);
    display: flex;
    justify-content:space-between;
}
.drop-down-y,.drop-down-m{
    width:155px;
    height:272px;
    overflow:auto;
    padding:5px;
}
.drop-down-y::-webkit-scrollbar,.drop-down-m::-webkit-scrollbar{
    display: none;
}
.drop-down-y{

}
.drop-down-m{

}
.drop-down-y a,.drop-down-m a{
    color:#000;
    text-align:center;
    display: inline-block;
    width:100%;
    height:30px;
    line-height:30px;
    font-size:18px;
    margin:0 0 5px 0;
}
.drop-down-y a:hover,.drop-down-m a:hover{
    color:#fff;
    background-color:rgba(10, 130, 229, 0.774);
    border-radius:5px;
}
.drop-down-y a.active,.drop-down-m a.active{
    color:#fff;
    background-color:#aacc03;
    border-radius:5px;
}
</style>
